<template>
  <menus-container title="行政区数据控制">
    <el-form label-width="auto" label-position="top" size="small">
      <el-form-item label="选择行政区">
        <el-cascader
          v-model="selectArea"
          :options="cascaderDatas"
          :props="cascaderProps"
          :show-all-levels="false"
          collapse-tags
          collapse-tags-tooltip
          clearable
          @change="onChange"
          @clear="onClear"
        />
      </el-form-item>
      <el-form-item label="自定义区域">
        <el-button @click="onDrawPolygon"> 绘制区域 </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onClearAll"> 清除所有 </el-button>
      </el-form-item>
    </el-form>
  </menus-container>
</template>

<script lang="ts" setup>
import {} from 'vue'
import MenusContainer from '/@src/components/menus-container/menus-container.vue'
import useLayerClip from './use-layer-clip'

const {
  cascaderDatas,
  selectArea,
  cascaderProps,
  onChange,
  onClear,
  onClearAll,
  onDrawPolygon
} = useLayerClip()
</script>

<style scoped lang="scss">
@import url('./layer-clip.scss');
</style>
